@import "../common.scss";

body {
	background-color: #fff;
}

.content {
	padding: ws(15);
	.title {
		color: $main-color;
		font-size: ws(36/2);
		margin-bottom: ws(36/2);
	}
	.repair-details {
		padding: ws(20);
		padding-bottom: ws(10);
		box-shadow: 0 0 ws(38/2) 0 rgba(0, 0, 0, 0.1);
		border-radius: ws(14/2);
		.desc {
			font-size: ws(28/2);
			color: #414141;
			line-height: ws(40/2);
		}
		.image-list {
			margin-top: ws(15);
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.img {
				width: ws(180/2);
				height: ws(110/2);
				background-color: #e5e5e5;
				margin-right: ws(10);
				margin-bottom: ws(10);
				overflow: hidden;
				>img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		.record-list {
			margin-top: ws(15);
			.item {
				background-color: lighten($main-color, 10%);
				height: ws(44/2);
				width: ws(150);
				padding: 0 ws(15);
				border-radius: ws(11);
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				font-size: ws(12);
				margin-bottom: ws(10);
				&:last-child{
					margin-bottom: unset;
				}
				>img {
					width: ws(11);
				}
			}
		}
	}
	.user-data {
		padding: 0 ws(20);
		margin-top: ws(15);
		.item {
			height: ws(94/2);
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: ws(28/2);
			color: #414141;
			@include border-line(#e4e1e1, bottom);
		}
	}
	.progress {
		margin-top: ws(30);
		padding: ws(20);
		box-shadow: 0 0 ws(38/2) 0 rgba(0, 0, 0, 0.1);
		border-radius: ws(14/2);
		.title {
			font-size: ws(14);
			color: $main-color;
			margin-bottom: ws(37/2);
		}
		.list {
			position: relative;
			&::after {
				position: absolute;
				content: '';
				width: ws(1);
				top: ws(8);
				bottom: ws(35);
				left: ws(3);
				background-color: #BBBBBB;
				transform: scaleX(.5);
				z-index: -1;
			}
			.item {
				margin-bottom: ws(15);
				&:last-child {
					margin-bottom: unset;
				}
				.item-sate {
					padding-left: ws(15);
					position: relative;
					display: flex;
					justify-content: space-between;
					margin-bottom: ws(5);
					.icon {
						position: absolute;
						top: 0;
						bottom: 0;
						margin: auto;
						left: 0;
						width: ws(7);
						height: ws(7);
						border-radius: 50%;
						background-color: $main-color;
					}
				}
				.item-desc {
					padding-left: ws(15);
					font-size: ws(13);
				}
			}
		}
	}
}


.mrk-record{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: ws(400);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    .record{
        width: ws(150);
        height: ws(150);
        background-color: rgba(#000,.5);
        border-radius: ws(10);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 100;
        .record-img{
            width: ws(80);
        }
        .record-span{
            color: #fff;
            font-size: ws(16);
        }
    }
}